<!--自定义顶栏导航组件-->
<template>
  <div class="head-container">
    <img id="logo" src="../../assets/校园安全管理系统/csms_logo_index.png" @click="toAlert">
    <div class="message" @click.stop="openNotice">
      <el-badge :value="10" :max="99" class="item"></el-badge>
      <el-icon id="bell" size="30"><Bell/></el-icon>
    </div>
    <div class="notices" v-if="show">
      <div class="notice" v-for="(notice) in notices" :key="index">
        <span class="date">{{notice.date}}</span>
        <span class="desc">{{notice.desc}}</span>
      </div>
    </div>
    <img id="user" src="../../assets/校园安全管理系统/csms_user.png">
<!--    <el-icon id="bell" size="30"><Bell/></el-icon>-->
  </div>
</template>

<script>
import {Bell} from "@element-plus/icons-vue";
import axios from "axios";
import router from "../../router";
import {ref} from "vue";
export default {
  name: "Header",
  components: {Bell},
  setup(){
    let show = ref(false)
    let dialogTableVisible = ref(false)
    let notices=[
      {
      'date': '2016-05-03',
      'desc': '您的申请已提交'
      },
      {
        'date': '2016-05-03',
        'desc': '您的申请已提交'
      },
      {
        'date': '2016-05-03',
        'desc': '您的申请已提交'
      },
      {
        'date': '2016-05-03',
        'desc': '您的申请已提交'
      },
      {
        'date': '2016-05-03',
        'desc': '您的申请已提交'
      },
      {
        'date': '2016-05-03',
        'desc': '您的申请已提交'
      },
    ]
    /**
     * 跳转到警告页函数
     */
    function toAlert(){
      router.replace({name:"AlertView"})
    }

    /**
     * 打开弹窗函数
     */
    function openNotice(){
      show.value = !show.value
    }

    /**
     * 监听任意点击事件，回调为实现关闭弹窗
     */
    document.addEventListener('click', (e)=>{
      if(e.target.className !== 'message'){
        show.value = false
      }
    })
    return{toAlert, show, openNotice, notices}
  }
}
</script>

<style scoped>
/*顶栏容器样式*/
.head-container{
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background-image: url("../../assets/校园安全管理系统/csms_background.jpg");
}
/*顶栏logo样式*/
.head-container #logo{
  width: 50px;
  height: auto;
  /*border: 2px solid red;*/
  margin: 5px;
  cursor: pointer;
}
.head-container #logo:hover{
  background: #98caf8;
  opacity: 0.7;
}
/*消息通知样式*/
.message{
  position: absolute;
  display: flex;
  right: 70px;
  top: 10px;
  /*border: 2px solid red;*/
  margin: 1px;
  /*background: red;*/
  cursor: pointer;
}
.item {
  position: relative;
  left: 45px;
  z-index: 1;
  /*background: aqua;*/
}
.message #bell{
  position: relative;
  right: 0;
}
/*个人信息栏样式*/
.head-container #user{
  position: absolute;
  right: 0;
  width: auto;
  height: 80%;
  /*border: 2px solid red;*/
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}
.head-container #user:hover{
  background: red;
  border-radius: 10%;
}
/*弹出消息页样式*/
.notices{
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 75px;
  top: 40px;
  z-index: 2;
  padding: 5px;
  background: white;
  gap: 10px;
  border-radius: 10px;
}
.notice{
  display: flex;
  flex-direction: row;
  gap: 10px;
  /*padding: 10px;*/
  background: white;
  border-radius: 10px;
}
.notice span{
  padding: 10px;
  border-radius: 10px;
  background: #98caf8;
  cursor: pointer;
}
.notice :first-child{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
}
.notice :nth-child(2){
  font-family: 华文中宋;
}

</style>